import React, {useEffect, useState} from 'react';
import {Modal, Form, Input, Select, Button, message} from 'antd';
import {getAcademyInfo} from "../../../api/academy.js";

const { Option } = Select;

const TeacherModal = ({ visible, onOk, onCancel, editingRecord}) => {
    const [academyList, setAcademyList] = useState([]);
    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false);

    const fetchAcademyInfo = async () => {
        setLoading(true);
        try {
            const res = await getAcademyInfo(null);
            setAcademyList(res.data);
        } catch (error) {
            message.error('获取学院列表失败');
            console.error(error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        if (visible) {
            fetchAcademyInfo();
            if (editingRecord) {
                form.setFieldsValue(editingRecord);
            } else {
                form.resetFields();
            }
        }
    }, [visible, editingRecord]);

    const handleOk = () => {
        form.validateFields().then(values => {
            onOk(values);
            form.resetFields();
        });
    };

    return (
        <Modal
            title={editingRecord ? '编辑教师信息' : '新增教师信息'}
            open={visible}
            onOk={handleOk}
            onCancel={() => {
                form.resetFields();
                onCancel();
            }}
            footer={[
                <Button key="cancel" onClick={onCancel}>
                    取消
                </Button>,
                <Button key="submit" type="primary" onClick={handleOk}>
                    提交
                </Button>
            ]}
        >
            <Form form={form} layout="vertical" name="teacher_form">
                {/* 教师姓名 */}
                <Form.Item
                    label="教师姓名"
                    name="teacherName"
                    rules={[{ required: true, message: '请输入教师姓名！' }]}
                >
                    <Input placeholder="请输入教师姓名" />
                </Form.Item>

                {/* 年龄 */}
                <Form.Item
                    label="年龄"
                    name="age"
                    rules={[
                        { required: true, message: '请输入年龄！' },
                        {
                            pattern: /^[1-9]\d?$/,
                            message: '请输入1~99之间的有效年龄'
                        }
                    ]}
                >
                    <Input type="number" min={1} max={99} placeholder="请输入年龄" />
                </Form.Item>

                {/* 性别 */}
                <Form.Item
                    label="性别"
                    name="gender"
                    rules={[{ required: true, message: '请选择性别！' }]}
                >
                    <Select
                        options={[
                            { value: '1', label: '男' },
                            { value: '0', label: '女' }
                        ]}
                        placeholder="请选择性别"
                    />
                </Form.Item>

                {/* 手机号 */}
                <Form.Item
                    label="手机号"
                    name="phoneNumber"
                    rules={[
                        { required: true, message: '请输入手机号！' },
                        {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '请输入有效的中国大陆手机号'
                        }
                    ]}
                >
                    <Input placeholder="请输入手机号" maxLength={11} />
                </Form.Item>

                {/* 学历 */}
                <Form.Item
                    label="学历"
                    name="degree"
                    rules={[{ required: true, message: '请选择学历！' }]}
                >
                    <Select placeholder="请选择学历">
                        {['本科', '硕士', '博士'].map(degree => (
                            <Option key={degree} value={degree}>{degree}</Option>
                        ))}
                    </Select>
                </Form.Item>

                {/* 所属学院 */}
                <Form.Item
                    label="所属学院"
                    name="academyId"
                    rules={[{ required: true, message: '请选择所属学院！' }]}
                >
                    <Select
                        showSearch
                        loading={loading}
                        placeholder="请选择学院"
                        optionFilterProp="children"
                        filterOption={(input, option) =>
                            option.children.toString().toLowerCase().includes(input.toLowerCase())
                        }
                    >
                        {academyList.map(academy => (
                            <Option key={academy.id} value={academy.id}>
                                {academy.academyName}
                            </Option>
                        ))}
                    </Select>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default TeacherModal;